/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */

.df-add-button {
    box-sizing: border-box;
    @include btn(white);
    @include fa-icon($fa-var-plus, before, inline-block, 0 8px 0 0, 0, inherit, 11px);

    @include transition-property(width, padding, border-radius);
    @include transition-duration(200ms);
    @include transition-timing-function(ease-in);

    float: left;
    padding: 12px 10px;
    width: 92px;
    height: $df-height;
    cursor: pointer;
    text-align: center;
    box-shadow: none;

    // Z Axis positioning for transitioning label
    position: relative;
    z-index: 2;

    // Transition Properties for @include fa-icon(...); mixin
    &:before {
        @include transition(color 200ms ease-in);
    }

    .js-df-state-new-filter & {
        @include fa-icon($fa-var-plus, before, inline-block, 0, 0, #c9d0d3, 11px);

        width: 25px;
        padding: 12px 5px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        > span {
            display: none;
        }
    }
}
